"use client";
import LSwiper from "@/components/swiper";
import LLayout from "@/components/layout/layout";
import Link from "next/link";
import ShowArticle from "@/components/article";
import { useEffect, useState } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useCustomFetch } from "@/utils/network";

export default function App() {
  const [showPage, SetShowPage] = useState({
    swiper: [],
    sidePicture: [],
    measurement: [],
  });
  const t = useTranslations("home");
  const params = useParams();

  async function GetData(lang: string) {
    const { data } = await useCustomFetch(`/index?lang=${lang}`);

    SetShowPage({
      swiper:
        data.swiper.swiper != "" ? JSON.parse(data.swiper.swiper) : new Array(),
      sidePicture:
        data.swiper.sidePicture != ""
          ? JSON.parse(data.swiper.sidePicture)
          : new Array(),
      measurement: data.measurement.map((item: any) => ({
        ...item,
        Cover: JSON.parse(item.Cover)[0].url,
      })),
    });
  }
  useEffect(() => {
    GetData(params.locale as string);
    localStorage.setItem("i18n_local", params.locale as string);
  }, [params]);
  return (
    <main>
      {/* <LSwiper arr={showPage.swiper}></LSwiper> */}

      <div className="relative">
        <div
          style={{
            background: `url('http://i18nport.dongsongkeji.com.cn/upload/3cafced8-ed88-5b7c-81ff-3f134c3b6bd5.webp')`,
          }}
          className="iamge1 absolute -z-10 top-0 left-0 right-0 bottom-0 outline-none"
        ></div>
        <img
          className="w-3/4 mx-auto h-[450px]"
          src="http://i18nport.dongsongkeji.com.cn/upload/3cafced8-ed88-5b7c-81ff-3f134c3b6bd5.webp"
          alt=""
        />
      </div>
      <LLayout
        sideSwiper={showPage.sidePicture}
        title="homeTitle"
        isShouImg
        locale={params.locale}
      >
        <div className="w-full border-b-2">
          <div>
            <h2 className="text-xl font-semibold p-1 bg-gray-300/40">
              {t("four.product")}
            </h2>
            <ul className="flex items-center">
              {showPage.measurement?.map((item: any, index) => {
                console.log("---item ", item);

                return (
                  <li
                    key={item.ID}
                    className=" w-1/4 h-1/4 text-center py-2 hover-bottom-line"
                  >
                    <a
                      className="block"
                      href={`/${item.Language}/product-detail/${item.Language}/${item.Type}/${item.Series}/${item.Name}/${item.ID}`}
                    >
                      <div className="px-2">
                        <div className="h-48 overflow-hidden">
                          <img
                            width={150}
                            height={150}
                            className="mx-auto h-full object-cover"
                            src={item.Cover}
                            alt={item.Name}
                            title={item.Name}
                          />
                        </div>
                        <div className="my-1">
                          <div>{item.Name}</div>
                          <div className=" truncate">
                            {t("product-series")}: {item.Series}
                          </div>
                        </div>
                      </div>
                    </a>
                  </li>
                );
              })}
              {!showPage.measurement && <div>没有数据...</div>}
            </ul>
          </div>
        </div>
      </LLayout>
    </main>
  );
}
